﻿<!DOCTYPE html>
<html>
<head>
    <title id="Description">This demo showcases the jqxNotification events.</title>
    <meta name="keywords" content="event, jQuery notification, jQWidgets, jqxNotification, jqxNotification event, notification, unobtrusive notification" />
    <meta name="description" content="This demo showcases the jqxNotification events." />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxNotification").jqxNotification({ width: "auto", position: "top-right", opacity: 0.9,
                closeOnClick: true, autoClose: false, showCloseButton: true, template: "mail", blink: true
            });

            $("#checkMail").jqxButton();
            $("#eventsPanel").jqxPanel({ width: 150, height: 150 });

            $("#checkMail").click(function () {
                $("#jqxNotification").jqxNotification("open");
            });

            // event handlers
            $("#jqxNotification").on("open", function (event) {
                $("#eventsPanel").jqxPanel("append", event.type + "<br />");
            });
            $("#jqxNotification").on("close", function (event) {
                $("#eventsPanel").jqxPanel("append", event.type + "<br />");
            });
            $("#jqxNotification").on("click", function (event) {
                $("#eventsPanel").jqxPanel("append", event.type + "<br />");
                $("#messagePanel").fadeIn();
            });
        });
    </script>
</head>
<body>
    <div id="jqxNotification">
        <div>
            You have <b>2</b> new messages.</div>
        <div style="font-size: smaller; text-align: center;">
            Click to view.</div>
    </div>
    <button id="checkMail">
        Check mail</button>
    <div style="margin-top: 15px;">
        Events log:</div>
    <div id="eventsPanel">
    </div>
    <div id="messagePanel" style="width: 400px; display: none;">
        <p>
            <b>From:</b> Ken</p>
        <p>
            <b>About</b>: Appointment</p>
        <p>
            Hi,<br />
            I just wanted to remind you dinner is at 8pm tonight at Carl's.</p>
        <hr style="width: 300px; text-align: right;" />
        <p>
            <b>From:</b> Sue</p>
        <p>
            <b>About</b>: Shopping</p>
        <p>
            Here's the shopping list for tommorow's party:</p>
        <ul>
            <li>Wine</li>
            <li>Tomatoes</li>
            <li>Cheese</li>
            <li>Popcorn</li></ul>
    </div>
</body>
</html>
